<script setup>
import {userStatus} from "@/pinia/userStatus"
import {deng_ji} from "@/activity/xiu_wei/deng_ji.js"
const user = userStatus()

const props = defineProps(['changRouter'])

function changeView(view) {
  props.changRouter(view)
}
</script>

<template>
  <div class="body">
    <n-divider>属性</n-divider>
    <div class="shu_xing">
      <n-list clickable :show-divider="false">
        <n-list-item @click="changeView('ren_wu_bei_bao')">
          <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 背包</n-gradient-text>
        </n-list-item>
      </n-list>
    </div>
    <div class="xiu_xing">
      <n-list clickable :show-divider="false">
        <n-list-item @click="changeView('xian')">
          <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 修行</n-gradient-text>
        </n-list-item>
      </n-list>
    </div>
    <div class="xiu_wei">
      <n-descriptions label-placement="left" :column="2" title="修为" separator=":">
        <n-descriptions-item label="姓名"> <n-input v-model:value="user.xin_ming" class="ming_cheng" type="text" size="tiny" maxlength="8"/> </n-descriptions-item>
        <n-descriptions-item label="道号"> <n-input v-model:value="user.dao_hao" class="ming_cheng" type="text"  size="tiny" maxlength="8"/> </n-descriptions-item>
        <n-descriptions-item label="修改为大段"> {{ deng_ji[user.xiu_da].name }}</n-descriptions-item>
        <n-descriptions-item label="修改为小段"> {{user.xiu_xi < deng_ji[user.xiu_da].xi_fen.length ? deng_ji[user.xiu_da].xi_fen[user.xiu_xi].name : "巅峰" }}</n-descriptions-item>
        <n-descriptions-item label="寿元"> {{ user.shou_ming }} 年</n-descriptions-item>
        <n-descriptions-item label="年龄"> {{ user.use_shou_ming }} 岁</n-descriptions-item>
        <n-descriptions-item label="增加灵力的基数"> {{ user.ling_up }}</n-descriptions-item>
      </n-descriptions>
    </div>
    <div class="ren_wu_shu_xing">
      <n-descriptions label-placement="left" :column="2" title="属性" separator=":">
        <n-descriptions-item label="灵力">
          <n-popover  trigger="hover" :style="{ maxWidth: '266px' }">
            <template #trigger>
              <div> {{ user.ling_li }}</div>
            </template>
            灵力通过吸收天地灵气获取，可以通过宝物加快获取灵力。
          </n-popover >
        </n-descriptions-item>
        <n-descriptions-item label="血量">
          <n-popover  trigger="hover" :style="{ maxWidth: '266px' }">
            <template #trigger>
              <div> {{ user.attribute.xue_liang }}</div>
            </template>
            血量来源于《神魂》和《筋骨》，增强这两个属性，可以提升血量。
          </n-popover >
        </n-descriptions-item>

        <n-descriptions-item label="神魂">
          <n-popover  trigger="hover" :style="{ maxWidth: '266px' }">
            <template #trigger>
              <div> {{ user.attribute.shen_hun }}</div>
            </template>
            凝练神魂可以提升所有的属性。
          </n-popover >
        </n-descriptions-item>
        <n-descriptions-item label="攻击">
          <n-popover  trigger="hover" :style="{ maxWidth: '266px' }">
            <template #trigger>
              <div> {{ user.attribute.gong_ji }}</div>
            </template>
            攻击突破防御才能伤人。
          </n-popover >
        </n-descriptions-item>
        <n-descriptions-item label="筋骨">
          <n-popover  trigger="hover" :style="{ maxWidth: '266px' }">
            <template #trigger>
              <div> {{ user.attribute.jin_gu }}</div>
            </template>
            可以通过努力锻炼来提升，提升筋骨，不仅可以获得血量，还可以提高攻击数值。
          </n-popover >
        </n-descriptions-item>
        <n-descriptions-item label="防御">
          <n-popover  trigger="hover" :style="{ maxWidth: '266px' }">
            <template #trigger>
              <div> {{ user.attribute.fang_yu }}</div>
            </template>
            想要保命还是得命硬一点才行。
          </n-popover >
        </n-descriptions-item>
        <n-descriptions-item label="洞察">
          <n-popover  trigger="hover" :style="{ maxWidth: '266px' }">
            <template #trigger>
              <div> {{ user.attribute.dong_cha }}</div>
            </template>
            提高洞察可以提升《命中》和《闪避》等属性。
          </n-popover >
        </n-descriptions-item>
        <n-descriptions-item label="命中">
          <n-popover  trigger="hover" :style="{ maxWidth: '266px' }">
            <template #trigger>
              <div> {{ user.attribute.ming_zhong }}</div>
            </template>
            打不中人，瞪人还是瞪不死的。
          </n-popover >
        </n-descriptions-item>
        <n-descriptions-item label="迅捷">
          <n-popover  trigger="hover" :style="{ maxWidth: '266px' }">
            <template #trigger>
              <div> {{ user.attribute.xun_jie }}</div>
            </template>
            提高迅捷可以提升《命中》和《闪避》等属性。
          </n-popover >
        </n-descriptions-item>
        <n-descriptions-item label="闪避">
          <n-popover  trigger="hover" :style="{ maxWidth: '266px' }">
            <template #trigger>
              <div>{{ user.attribute.shan_bi }}</div>
            </template>
            脚底抹了油，该溜还得溜。
          </n-popover >
        </n-descriptions-item>
      </n-descriptions>
    </div>
  </div>
</template>

<style scoped lang="scss">

.body {
  width: 100%;
  height: 680px;
  // 设置为相对定位
  position: relative;
}

.xiu_wei{
  margin: 8px;
}

.ren_wu_shu_xing{
  margin: 88px 8px 8px;
}

.shu_xing {
  // 设置为据对定位
  position: absolute;
  width: 66px;
  left: 88px;
  bottom: 18px
}

.xiu_xing {
  position: absolute;
  width: 66px;
  right: 88px;
  bottom: 18px;
  text-align: right;
}

.ming_cheng{
  background-color: inherit !important;
  width: 120px;
}

.n-list {
  background-color: inherit !important;
  user-select: none;
}

</style>
